import React, {useState} from "react";
import {Button, Card, Form, Input, message, Modal, Space, Table} from "antd";
import {PlusOutlined, SearchOutlined} from "@ant-design/icons";
import {useForm} from "antd/es/form/Form";
import ImageUpload from "../../components/ImageUploade";

export default function MedicineCategories() {
    const [isShow, setIsShow] = useState(false);
    const [myForm] = Form.useForm();
    return (
        <>
            <Card
                style={{width: '100%', height: '100%'}}
                title={"药品分类"}
                extra={
                    <>
                        <Button
                            type={'primary'}
                            icon={<PlusOutlined/>}
                            //控制modal的显示和隐藏
                            onClick={() => {
                                setIsShow(true)
                            }}
                        />
                    </>
                }
            >
                <Space
                    direction={'vertical'}
                    style={{width: '100%'}}
                >
                    <Form layout={'inline'} style={{width: '100%', height: '100%'}}>
                        <Form.Item label={'名字'}>
                            <Input placeholder={'请输入关键字'}/>
                        </Form.Item>
                        <Form.Item>
                            <Button type={'primary'} icon={<SearchOutlined/>}/>
                        </Form.Item>
                        <Table
                            style={{width: '100%', height: '100%'}}
                            columns={[
                                {
                                    title: '序号',
                                    width: 80,
                                    align: 'center',
                                },
                                {
                                    title: '名字',
                                    width: 80,
                                    align: 'center',
                                },
                                {
                                    title: '主图',
                                    width: 120,
                                    align: 'center',
                                },
                                {
                                    title: '简介',
                                    width: 80,
                                    align: 'center',
                                },
                                {
                                    title: '操作',
                                    width: 110,
                                    align: 'center',
                                },
                            ]}
                        >

                        </Table>
                    </Form>
                </Space>
            </Card>
            <Modal
                title={"编辑"}
                open={isShow}
                //点击遮罩层时不关闭
                maskClosable={false}
                //关闭 Modal 的时候清除数据
                destroyOnClose
                onOk={() => {
                    //手动触发
                    myForm.submit();
                    // message.success("保存成功");
                }}
                onCancel={() => {
                    setIsShow(false);
                }}
            >
                <Form
                    // 表单配合modal一起使用,需要设置,否则modal中的destroyOnClose不生效
                    preserve={false}
                    labelCol={{span: 3}}
                    from={myForm}
                    onFinish={(values) => {
                        message.success("保存成功");
                        console.log(values);
                    }}>
                    <Form.Item
                        label={"名字"}
                        name={'name'}
                        rules={[
                            {
                                required: true,
                                message: '请输入名字'
                            }
                        ]}
                    >
                        <Input placeholder={"请输入名字"}></Input>
                    </Form.Item>
                    <Form.Item label={"简介"} name={'intro'}>
                        <Input.TextArea placeholder={"请输入简介"}></Input.TextArea>
                    </Form.Item>
                    <Form.Item label={"主图"} name={'picture'}>
                        <ImageUpload/>
                    </Form.Item>
                </Form>
            </Modal>
        </>

    )
}
